import React from "react"
import ReactDOM from "react-dom"
import AJAX from "../../lib/ajax"
import tools from "../../lib/tools"
import classNames from "classnames"
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare"
import Toast from "../MyPackage/components/Toast"
import Dialog from "../MyPackage/components/Dialog"
import ExpressCard from "../../components/ExpressCard/ExpressCard"

require('../../lib/resetFont')
require('./DeliverySetting.less')


const isShow = false;

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            delivery_conf_desc: {}
        }
    }

    componentWillMount() {
        addErrorListener()()
        //隐藏分享功能
        weixinShare.hideAll()

        this.fetch()
    }

    componentDidMount() {
        AJAX.appendBaiduAnalysis()
    }

    fetch() {
        AJAX.request("set_check", {}, (data) => {
            if (data.code === 0) {
                this.setState({
                    user_set: data.body.delivery_conf,
                    current_set: data.body.delivery_conf,
                    delivery_conf_desc: data.body.delivery_conf_desc
                })
            }
        })
    }

    set(set_id) {
        return () => {
            this.setState({
                current_set: set_id
            })
        }
    }
    submit() {
        const { current_set, user_set } = this.state;
        const wx_type = window.localStorage.getItem('wx_type');
        if (current_set && current_set !== user_set) {
            AJAX.request("delivery_conf_update", {
                status: current_set
            }, (data) => {
                if (data.code == 0) {
                    Toast.success({
                        type: "new",
                        content: "设置成功"
                    })
                    setTimeout(() => {
                        window.location.href = `./Personal?wx_type=${wx_type}`;
                    }, 1500)
                } else {
                    Toast.error({
                        type: "new",
                        content: "设置失败"
                    })
                }
            })
        } else {
            window.location.href = `./Personal?wx_type=${wx_type}`;
        }
    }

    showTip(id) {
        return () => {
            if (id === 2) {
                Dialog.info({
                    title: "说明",
                    type: 'new',
                    content: "以后您如果同意投入近邻宝，可取消此项勾选，快递员即可投递",
                    okText: "确认",
                    onOK: () => { }
                })
            } else if (id === 3) {
                Dialog.info({
                    title: "收费模式说明",
                    type: 'new',
                    content: "近邻宝的使用遵循“自愿原则”，投递时可选择快递员付费或收件人付费:1、若快递员付费，投递时需支付0.5元/格。收件人超过24H未取按0.5元/24H付费，3元封顶。2、若收件人付费，从投递成功开始，收件人按0.5元/24H付费，3.5元封顶。",
                    okText: "确认",
                    onOK: () => { }
                })
            }
        }
    }

    makeContent() {
        const { current_set, delivery_conf_desc } = this.state

        const cls1 = current_set === 1 ? "icon-duihao" : "icon-yuanquan"
        const cls2 = current_set === 2 ? "icon-duihao" : "icon-yuanquan"
        const cls3 = current_set === 3 ? "icon-duihao" : "icon-yuanquan"
        const cls4 = current_set === 4 ? "icon-duihao" : "icon-yuanquan"

        return (
            <div className="DeliverySetting">
                <div className="content lux-mt20">
                    <div className="cell lux-pl20 lux-pr20 lux-pt20 lux-pb20">
                        <div className="icon lux-w94" onClick={this.set(1)}>
                            <i className={classNames("iconfont", cls1)} />
                        </div>
                        <div className="text">
                            <p>{delivery_conf_desc["1"]}</p>
                        </div>
                    </div>
                    <div className="cell lux-pl20 lux-pr20 lux-pt20 lux-pb20">
                        <div className="icon lux-w94" onClick={this.set(2)}>
                            <i className={classNames("iconfont", cls2)} />
                        </div>
                        <div className="text">
                            <p>{delivery_conf_desc["2"]}</p>
                        </div>
                        <div className="icon lux-w94" onClick={this.showTip(2)}>
                            <i className="iconfont icon-iconfontjinggao" />
                        </div>
                    </div>
                    {/* {isShow ? (
                        <>
                            <div className="cell lux-pl20 lux-pr20 lux-pt20 lux-pb20">
                                <div className="icon lux-w94" onClick={this.set(3)}>
                                    <i className={classNames("iconfont", cls3)} />
                                </div>
                                <div className="text">
                                    <p>{delivery_conf_desc["3"]}</p>
                                </div>
                                <div className="icon lux-w94" onClick={this.showTip(3)}>
                                    <i className="iconfont icon-iconfontjinggao" />
                                </div>
                            </div>
                            <div className="cell lux-pl20 lux-pr20 lux-pt20 lux-pb20">
                                <div className="icon lux-w94" onClick={this.set(4)}>
                                    <i className={classNames("iconfont", cls4)} />
                                </div>
                                <div className="text">
                                    <p>{delivery_conf_desc["4"]}</p>
                                </div>
                            </div>
                        </>
                    ) : null} */}
                </div>
                {/* {isShow ? (<div className="tips lux-mt40 lux-pl40 lux-pr40">
                    <p><b>温馨提示</b>：若您选择2、3标签的其中之一，快递员可能会电话联系你商议其他方式派送；
                        您将不能享受近邻宝带来的便捷安全的24小时服务。</p>
                </div>) : null} */}
                <div className="button lux-h80" onClick={this.submit.bind(this)}>
                    确定
                </div>
            </div>
        )
    }

    render() {
        const { delivery_conf_desc } = this.state
        const page_loaded = Object.keys(delivery_conf_desc).length > 0

        const content = page_loaded ? this.makeContent() : <div></div>

        return content
    }
}
ReactDOM.render(<App />, document.getElementById('app'))
if (module.hot) {
    module.hot.accept()
}